<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-07 16:29:06
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-10 09:24:50
-->
<template>
    <div class="xsTable">
        <div class="xsTable-top">
            <div class="title">
                <div class="name">销售目标</div>
            </div>
            <div class="count">
                <span>确保目标：{{ totalCountEnsure }}台</span><span>力争目标：{{ totalCountAim }}台</span
                ><span>实际完成：{{ totalCountActual }}台</span>
            </div>

            <div class="shaixuan">
                <span class="sxline">|</span>
                <img class="sximg" src="../assets/shaixuan.png" @click="openDialog" alt="" />
                <span class="sx" @click="openDialog">筛选</span>
            </div>
        </div>
        <div class="blank"></div>

        <el-table :data="tableData" empty-text="暂无数据" style="width: 100%" :header-cell-style="{ color: '#3484FF' }" :show-header="true">
            <el-table-column fixed="left" prop="fdate" label="目标月份" align="center" width="100">
                <template #default="scope">
                    <span>{{ String(scope.row.fdate).slice(0, 7) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="fjx" label="机型" align="center" width="100"> </el-table-column>
            <el-table-column prop="fpq" label="所属片区" align="center" width="100"> </el-table-column>
            <el-table-column prop="fcust" label="经销商" align="center" width="120"> </el-table-column>
            <el-table-column prop="fsaler" label="销售员" align="center"> </el-table-column>
            <el-table-column prop="flowest" label="确保目标(台)" align="center" width="120"> </el-table-column>
            <el-table-column prop="fhope" label="力争目标(台)" align="center" width="120"> </el-table-column>
            <el-table-column prop="freal" label="实际完成(台)" align="center" width="120"> </el-table-column>
            <el-table-column prop="fproportion" label="确保目标完成比例(%)" align="center" width="140"> </el-table-column>
            <el-table-column prop="lzmbwcbl" label="力争目标完成比例(%)" align="center" width="140"> </el-table-column>



        </el-table>
        <van-pagination v-model="pageOption.pageNumber" :total-items="totalPage" @change="pageChange" mode="simple" />
        <!-- 搜索弹框 -->
        <van-dialog v-model:show="xsDialogShow" :show-confirm-button="false" width="94%">
            <div style="padding: 15px 10px; display: flex; justify-content: space-between">
                <span> 销售目标筛选 </span>
                <span @click="closeDialog">
                    <i class="el-icon-close"></i>
                </span>
            </div>
            <van-form @submit="onSubmit">
                <van-field v-model="form.jx" name="机型" label="机型" placeholder="请输入机型" />
                <van-field v-model="form.pq" name="所属片区" label="所属片区" placeholder="请输入所属片区" />
                <van-field v-model="form.jxs" name="经销商" label="经销商" placeholder="请输入经销商" />
                <van-field v-model="form.xsy" name="销售员" label="销售员" placeholder="请输入销售员" />
                <van-field v-model="form.startqbmb" name="起始确保目标" label="起始确保目标" type="digit"  placeholder="请输入起始确保目标" />
                <van-field v-model="form.endqbmb" name="结束确保目标" label="结束确保目标" type="digit" placeholder="请输入结束确保目标" />
                <van-field v-model="form.startlzmb" name="起始力争目标" label="起始力争目标" type="digit"  placeholder="请输入起始力争目标" />
                <van-field v-model="form.endlzmb" name="结束确保目标" label="结束确保目标" type="digit" placeholder="请输入结束力争目标" />
                <van-field v-model="form.startsjwc" name="起始实际完成" label="起始实际完成" type="digit"  placeholder="请输入起始实际完成" />
                <van-field v-model="form.endqsjwc" name="结束实际完成" label="结束实际完成" type="digit" placeholder="请输入结束实际完成" />
                <van-field
                    readonly
                    clickable
                    name="datetimePicker"
                    v-model="form.startTime"
                    label="目标月份"
                    placeholder="请选择目标月份"
                    @click="showPicker = true"
                    class="startTime"
                />

                <div style="margin: 16px; display: flex; justify-content: space-evenly">
                    <van-button type="default" @click="reset" style="width: 153px; color: #666666">重置</van-button>
                    <van-button type="info" @click="searchValue" style="width: 153px; border: 1px solid #3484ff; background: #3484ff; color: #fff"
                        >搜索</van-button
                    >
                </div>
            </van-form>
        </van-dialog>

        <van-popup v-model:show="showPicker" position="bottom">
            <van-datetime-picker type="year-month" title="日期选择" @confirm="onConfirmTime" v-model="currentDate" @cancel="showPicker = false" />
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue';
import { Sales } from '@/http';
import dateJs from 'dayjs'

export default defineComponent({
    name: 'xsTable',
    components: {},
    props: {},
    setup() {
        const state = reactive({
            currentPage: 2,
            tableData: [],
            /**确保 总计数量 */
            totalCountEnsure: 0,
            /**力争目标  总数*/
            totalCountAim: 0,
            /**实际完成 总数 */
            totalCountActual: 0,

            /**总页数 */
            totalPage: 0,
            /**搜索弹框是否显示 */
            xsDialogShow: false,
            /**搜索内容 */
            form: {
                /**机型 */
                jx: '',
                /**所属片区 */
                pq: '',
                jxs:'',
                xsy:'',
                startlzmb:'',
                endlzmb:'',
                startsjwc:'',
                endsjwc:'',
                startqbmb: '',
                endqbmb:'',
                startTime: '',

            },
            /**展示购机 起始时间选择器 */
            showPicker: false,
            /**展示购机 结束日期选择器 */
            showPickerEnd: false,
            pageOption: {
                pageNumber: 1,
                pageSize: 10,
            },
            currentDate: '',
            /**目标月份 显示 */
            showPickerTargetMonth:false,


        });
        const onConfirmTime = (time) => {
            state.form.startTime = timeFormat(new Date(time));
            state.showPicker = false;
        };


        /*时间格式化*/

        const timeFormat = (data) => {
            let year = data.getFullYear();
            let month = data.getMonth() + 1 > 9 ? data.getMonth() + 1 : '0' + (data.getMonth() + 1);
            let day = data.getDate() > 9 ? data.getDate() : '0' + data.getDate();
            let hour = data.getHours() > 9 ? data.getHours() : '0' + data.getHours();
            let minutes = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes();
            let seconds = data.getSeconds() > 9 ? data.getSeconds() : '0' + data.getSeconds();
            let time = year + '-' + month ;
            return time;
        };
        /**重置表格数据 */
        const reset = () => {
            state.form = {
                /**机型 */
                jx: '',
                /**所属片区 */
                pq: '',
                jxs:'',
                xsy:'',
                startlzmb:'',
                endlzmb:'',
                startsjwc:'',
                endsjwc:'',
                startqbmb: '',
                endqbmb:'',
                startTime: '',

            };
        };
        /**搜索数据 */
        const searchValue = () => {
            state.pageOption.pageNumber = 1;
            getData();
            state.xsDialogShow = false;
        };

        /**获取 表格数据 */
        const getData = () => {
            var fromList = {
                jx: state.form.jx,
                pq: state.form.pq,
                startqbmb:state.form.startqbmb as any ,
                endqbmb:state.form.endqbmb as any,
                startTime: state.form.startTime,
                endTime:getEndTime(state.form.startTime),
                pageNumber: state.pageOption.pageNumber,
                pageSize: state.pageOption.pageSize,
                startlzmb: state.form.startlzmb as any,
                endlzmb: state.form.endlzmb as any,
                startsjwc: state.form.startsjwc as any,
                endsjwc: state.form.endsjwc as any,
                jxs: state.form.jxs,
                xsy: state.form.xsy
            };

            Sales.GetSalesTargetList(fromList).then((res) => {
                state.totalCountEnsure = res.item1 as any;
                state.totalCountAim = res.item2 as any;
                state.totalCountActual = res.item3 as any;
                state.totalPage = res.item4 as any;
                state.tableData = res.item5 as any;
            });
        };
            /**获取结束时间 */
       const getEndTime = (date) =>  {
        let time = dateJs(date).add(1, 'month');
        let year = time['$y'];
        let month = Number(time['$M'] + 1) < 10 ? '0' + Number(time['$M'] + 1) : time['$M'] + 1;
        let day = time['$D'] < 10 ? '0' + time['$D'] : time['$D'];
        var  string = year + '-' + month;
        return string
    }
        onMounted(() => {
            state.currentDate = new Date() as any;
            getData();
        });

        /**打开搜索弹框 */
        const openDialog = () => {
            reset();
            state.xsDialogShow = true;
        };
        /**页码改变的时候 */
        const pageChange = (value) => {
            state.pageOption.pageNumber = value;
            getData();
        };
        /**关闭 弹框 */
        const closeDialog = () => {
            state.xsDialogShow = false;
        };

        return {
            ...toRefs(state),
            openDialog,
            onConfirmTime,
            reset,
            searchValue,
            pageChange,
            closeDialog,
        };
    },
});
</script>

<style lang="scss" >
.xsTable {
    .el-table td {
        padding: 0 !important;
    }
    .xsTable-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 40px;
        padding: 10px;
        .title {
            display: flex;
            align-items: center;
            .name {
                font-family: 'PingFangSC-Medium';
                font-size: 14px;
                color: #303133;
                letter-spacing: 0;
                font-weight: 600;
                padding-left: 16px;
            }

        }
            .count {
                display: flex;
                flex-direction: column;


                font-family: 'PingFangSC-Regular';
                font-size: 12px;
                color: #303133;
                letter-spacing: 0;
                padding-left: 12px;
            }

        .shaixuan {
            display: flex;
            align-items: center;
            padding-right: 16px;
            .sxline {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #909399;
                letter-spacing: 0;
            }
            .sx {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #909399;
                letter-spacing: 0;
                position: relative;
                top: 1px;
            }
            .sximg {
                width: 12px;
                height: 12px;
                margin-left: 8px;
                margin-right: 8px;
                position: relative;
                top: 2px;
            }
        }
    }
    .blank {
        width: 100%;
        height: 10px;
        background: rgb(245, 245, 245);
        display: flex;
    }
    .el-table thead th {
        border-bottom: 1px solid #3484ff !important;
        // border-right: 3px solid #084A5F !important;
    }
    .el-table td {
        border-bottom: 0px solid #084a5f !important;
    }
    .van-cell::after {
        border-bottom: 0px solid #fff;
    }
    .van-field__control {
        border: 1px solid #ccc !important;
        padding: 6px;
    }
    .van-cell {
        align-items: center;
    }
    .van-field__right-icon {
        position: absolute;
        right: 5px;
    }

    .endTime .van-field__control {
        background: red;
        background: url('../assets/date.png') no-repeat;
        background-position: 95% center;
        background-size: 15px 15px;
    }
    .startTime .van-field__control {
        background: red;
        background: url('../assets/date.png') no-repeat;
        background-position: 95% center;
        background-size: 15px 15px;
    }
}
</style>
